<template>
  <div class="product">
    <div class="search">
      <template>
        <el-select
          filterable
          clearable
          remote
          reserve-keyword
          @blur="searchBlur"
          @change="searchTextChange"
          v-model="search"
          @clear="clear"
          :remote-method="remoteMethod"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <el-button type="primary" icon="el-icon-search"></el-button>
      <el-button type="primary" @click="addStu">增加项目</el-button>
    </div>
    <div class="select-class">
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            @visible-change="classVisible"
            v-model="classes"
            placeholder="请选择"
            @change="classChange"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="(item,index) in classList"
              :label="item"
              :value="item"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-button
      plain
      icon="iconfont icon-excel"
      @click="exportExcel"
      style="float: right ;color:green ;"
    >
      导出excel
    </el-button>
    <Dialog
      ref="stuDialog"
      :visible="visible"
      @sure="sure"
      @cancel="cancel"
    ></Dialog>
    <!-- 表格 -->
    <template>
      <el-table v-loading="loading" :data="stuData" border style="width: 100%">
        <el-table-column label="头像" align="center">
          <template v-slot="{ row: { headimgurl } }">
            <el-avatar
              size="large"
              shape="square"
              :src="
                headimgurl
                  ? headimgurl
                  : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
              "
            >
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
        </el-table-column>
        <el-table-column align="center" prop="degree" label="学历">
        </el-table-column>
        <el-table-column align="center" prop="productUrl" label="项目">
        </el-table-column>
        <el-table-column align="center" prop="cTime" label="创建时间">
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="look(row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="edit(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="delStu(row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        hide-on-single-page
        @current-change="pageChange"
        :pageSize="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as api from "@/api/users";
import qee from "qf-export-excel";
import storage from "@/utils/storage"
export default {
  data() {
    return {
      params:{
        class:""
      },
      visible: false,
      stuData: [],
      loading: false,
      total: 0,
      pageSize: 0,
      search: "",
      classList: [],// 班级列表
      classes: "",// 绑定的班级
      searchList:[],// 搜索列表
    };
  },
  meta: {
    title: "xyxmgl",
    name: "项目管理",
    icon: "iconfont icon-shangpinguanli",
  },
  components: {
    Dialog,
  },
  created() {
    //获取表格数据
    this.getStuList();
  },
  methods: {
    //导出excel
    exportExcel() {
      //导出的字段有哪些
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "名字",
          key: "name",
        },
        {
          title: "项目",
          key: "productUrl",
        },
      ];

      qee(titleList, this.stuData, "2205项目");
    },
    addStu() {
      //清空dialog中的数据
      this.$refs.stuDialog.stuForm = {};
      this.$refs.stuDialog.title = "增加学员信息";
      this.visible = true;
    },
    // 查看学员信息
    look(row){
      console.log(row)
      this.$router.push({path:'/studentmanger/studentprofile',query:row})
      // console.log({...row})
      // console.log(this.$refs.stuDialog.stuForm)
    },
    //编辑
    edit(row) {
      console.log(row);
      storage.get('look',row)
      // storage.get('look')
      // console.log(this.$refs.stuDialog)
      //数据回显
      this.$refs.stuDialog.stuForm = { ...row };
      this.$refs.stuDialog.title = "编辑学员信息";
      this.visible = true;
    },
    //删除学员信息
    delStu(row) {
      console.log({...row})
      this.$confirm("该操作将永久删除数据,是否继续?", "删除提示")
        .then(() => {
          api.deleteStu(row.sId).then((res) => {
            if (res.data.state) {
              this.$message.success("删除成功");
              this.getStuList();
            }
          });
        })
        .catch(() => {
          this.$message.error("已取消删除");
        });
    },
    //页码改变的时候
    pageChange(pageSize) {
      this.getStuList(undefined, pageSize);
    },
    //获取学员列表数据的方法
    getStuList(count = 10, page = 1, classes) {
      this.loading = true;
      api.getStuListApi(count, page, classes).then((res) => {
        // console.log(res);
        if (res.data.state) {
          this.stuData = res.data.data;
          this.total = res.data.total;
          this.pageSize = count;
          this.loading = false;
        }
      });
    },
    //点击了dialog确定按钮
    sure(formData) {
      console.log("dialogOpen");
      let dialogTitle = this.$refs.stuDialog.title;
      if (dialogTitle === "增加学员信息") {
        // console.log(formData)
        api.addStuApi(formData).then((res) => {
          // console.log(res);
          if (res.data.state) {
            //添加成功
            //更新列表
          }
        });
      } else if (dialogTitle === "编辑学员信息") {
        //发送编辑请求
        api.editStuApi(formData).then((res) => {
          // console.log(res);
          if (res.data.state) {
            this.getStuList();
            this.$message.success("更新成功");
          }
        });
      }

      this.visible = false;
    },
    //点击了dialog的取消按钮
    cancel() {
      this.visible = false;
    },
    // 选择班级
    classChange(query) {
      // console.log(query); 
      if(query==="all"){
        query=""
      }
      this.getStuList("","",query)
        this.loading = false;
    },
    // 班级select下拉框展示
    classVisible(isVisible){
      if(isVisible){
        api.getClassesApi().then(res=>{
          // console.log(res)
          this.classList=res.data.data
          // console.log(this.classList)
        })
      }
    },

    remoteMethod(query){
      // console.log(query)
      api.searchStuApi("",query,"").then(res=>{
        console.log(res)
        this.searchList=res.data.data
        // this.total=res.data.total
      })
    },
    // 搜索框
    searchTextChange(searchText){
      console.log(searchText)
      api.searchStuApi("",searchText,"").then(res=>{
        this.stuData=res.data.data
        // console.log(this.stuData)
        this.total=res.data.total
      })
    },
    clear(){},
    searchBlur(){},
  },
};
</script>
<style scoped lang="less">
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
  /deep/ .el-input__inner {
    width: 300px;
  }
}

.select-class {
  line-height: 40px;
  text-align: left;
  margin-bottom: 20px;
}
.stu-table .btn {
  width: 65px;
  height: 25px;
  padding: 0;
}
.pagination {
  margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
  color: green;
  font-size: 20px;
  margin-right: 3px;
}

.exportExcel .el-button {
  padding: 4px 7px;
  float: right;
}
.exportExcel {
  margin-bottom: 10px;
  overflow: hidden;
}
</style>